<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .jd-banner {
      position: relative;
      width: 590px;
      height: 470px;
      margin: 100px auto;
    }

    ul li {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    ol {
      display: flex;
      position: absolute;
      left: 40px;
      bottom: 30px;
    }

    ol li {
      padding: 3px;
      border-radius: 50%;
      margin: 0 3px;
      background: rgba(255, 255, 255, .2);
    }

    ol li span {
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .6);
      cursor: pointer;
    }

    ol li.active span {
      background: rgba(255, 255, 255, 1);
    }

    .ctrls a {

      position: absolute;
      top: 50%;
      width: 30px;
      height: 60px;
      margin-top: -30px;
      line-height: 60px;
      font-size: 24px;
      text-align: center;
      background: rgba(0, 0, 0, .3);
      text-decoration: none;
      color: #fff;
      opacity: .8;
    }

    .ctrls a.prev {
      left: 0;
    }

    .ctrls a.next {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="jd-banner">
    <ul>
      <li style="opacity: 1"><img
          src="http://127.0.0.1:57452/%E5%9B%BD%E5%BA%86%E4%BD%9C%E4%B8%9A/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q1.jpg"
          alt=""></li>
      <li><img
          src="http://127.0.0.1:57452/%E5%9B%BD%E5%BA%86%E4%BD%9C%E4%B8%9A/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q5.jpg"
          alt=""></li>
      <li><img
          src="http://127.0.0.1:57452/%E5%9B%BD%E5%BA%86%E4%BD%9C%E4%B8%9A/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q3.jpg"
          alt=""></li>
      <li><img
          src="http://127.0.0.1:57452/%E5%9B%BD%E5%BA%86%E4%BD%9C%E4%B8%9A/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q4.jpg"
          alt=""></li>
      <li><img
          src="http://127.0.0.1:57452/%E5%9B%BD%E5%BA%86%E4%BD%9C%E4%B8%9A/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q5.jpg"
          alt=""></li>
    </ul>
    <ol>
      <li class="active"><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
    </ol>
    <div class="ctrls">
      <a href="#" class="prev">&lt;</a>
      <a href="#" class="next">&gt;</a>
    </div>
  </div>
</body>

</html>